<template>
  <div
    id="main6"
    class="main"
  />
</template>

<script>
export default {
  mounted () {
    this.echartsFn()
  },
  methods: {
    echartsFn () {
      var chartDom = document.getElementById('main6')
      var myChart = this.$echarts.init(chartDom)
      var option

      var img =
  ''

      var trafficWay = [
        {
          name: '火车',
          value: 20
        },
        {
          name: '飞机',
          value: 10
        },
        {
          name: '客车',
          value: 30
        },
        {
          name: '轮渡',
          value: 40
        }
      ]

      var data = []
      var color = [
        '#00ffff',
        '#00cfff',
        '#006ced',
        '#ffe000',
        '#ffa800',
        '#ff5b00',
        '#ff3000'
      ]
      for (var i = 0; i < trafficWay.length; i++) {
        data.push(
          {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                shadowBlur: 20,
                borderColor: color[i],
                shadowColor: color[i]
              }
            }
          },
          {
            value: 2,
            name: '',
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0
              }
            }
          }
        )
      }
      var seriesOption = [
        {
          name: '',
          type: 'pie',
          clockWise: false,
          radius: [105, 109],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'outside',
                color: '#ddd',
                formatter: function (params) {
                  var percent = 0
                  var total = 0
                  for (var i = 0; i < trafficWay.length; i++) {
                    total += trafficWay[i].value
                  }
                  percent = ((params.value / total) * 100).toFixed(0)
                  if (params.name !== '') {
                    return (
                      '交通方式：' +
                params.name +
                '\n' +
                '\n' +
                '占百分比：' +
                percent +
                '%'
                    )
                  } else {
                    return ''
                  }
                }
              },
              labelLine: {
                length: 10,
                length2: 30,
                show: true,
                color: '#00ffff'
              }
            }
          },
          data: data
        }
      ]
      option = {
        backgroundColor: '#0A2E5D',
        color: color,
        title: {
          text: '交通方式',
          top: '48%',
          textAlign: 'center',
          left: '49%',
          textStyle: {
            color: '#fff',
            fontSize: 22,
            fontWeight: '400'
          }
        },
        graphic: {
          elements: [
            {
              type: 'image',
              z: 3,
              style: {
                image: img,
                width: 178,
                height: 178
              },
              left: 'center',
              top: 'center',
              position: [100, 100]
            }
          ]
        },
        tooltip: {
          show: true
        },
        legend: {
          icon: 'circle',
          orient: 'vertical',
          // x: 'left',
          data: ['火车', '飞机', '客车', '轮渡'],
          right: 10,
          bottom: 10,
          align: 'right',
          textStyle: {
            color: '#fff'
          },
          itemGap: 20
        },
        toolbox: {
          show: false
        },
        series: seriesOption
      }

      option && myChart.setOption(option)
    }
  }
}
</script>

<style>

</style>
